<template>
  <div class="scroll-wrapper">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        loading-text="一大波数据正在赶过来"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="(item, idx) in list"
          :key="idx"
          :title="item.title"
          @click="$router.push('/article/' + item.art_id)"
        >
          <div slot="label">
            <van-grid
              v-if="item.cover.images"
              :column-num="item.cover.images.length"
            >
              <van-grid-item
                v-for="(imgSrc, idx) in item.cover.images"
                :key="idx"
              >
                <van-image lazy-load :src="imgSrc" />
              </van-grid-item>
            </van-grid>
            <div class="meta">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ item.pubdate | relativeTime }}</span>
              <span
                class="close"
                v-if="$store.state.tokenInfo.token"
                @click.stop="hActionMoren(item.art_id)"
              >
                <van-icon name="close" />
              </span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>

    <van-popup v-model="isShowMoreAction" :style="{ width: '80%' }">
      <MoreAction @un-like="hUnlike" @report="hReport" ref="refMoreAction" />
    </van-popup>
  </div>
</template>

<script>
import { getArticles, unLike, report } from '../../api/article'
import MoreAction from '../hone/moreAction'

export default {
  name: 'ArticleList',
  props: ['channel'],
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      tiemstamp: Date.now(),
      refreshing: false, // 是否正在下拉刷新
      isShowMoreAction: false, // 初始不显示弹层
      articleId: null
    }
  },
  components: {
    MoreAction
  },
  methods: {
    async onRefresh () {
      const res = await getArticles(this.channel.id, Date.now())
      // 获取的数据
      const arr = res.data.data.results// 它是一个数组
      this.list.unshift(...arr)
      // 1. 更新时间戳
      this.tiemstamp = res.data.data.pre_timestamp

      // 2. 把loading设置为false
      this.refreshing = false
      // 3. 判断是否所有的数据全部加载完成，如果是：finished设为true
      if (arr.length === 0 || res.data.data.pre_timestamp === null) {
        // 说明取不到数据了
        this.finished = true
      }
      // 4. 页面上提示一下用户
      this.$toast.success('成功加载数据')
    },
    async onLoad () {
      const res = await getArticles(this.channel.id, this.tiemstamp)
      // 获取的数据
      const arr = res.data.data.results// 它是一个数组
      this.list.push(...arr)
      // 1. 更新时间戳
      this.tiemstamp = res.data.data.pre_timestamp

      // 2. 把loading设置为false
      this.loading = false
      // 3. 判断是否所有的数据全部加载完成，如果是：finished设为true
      if (arr.length === 0 || res.data.data.pre_timestamp === null) {
        // 说明取不到数据了
        this.finished = true
      }
      // 4. 页面上提示一下用户
      this.$toast.success('成功加载数据')
    },
    hActionMoren (id) {
      this.isShowMoreAction = true
      // 2. 保存id
      this.articleId = id
      // 3.将子组件中的isReport设置成false
      if (this.$refs.refMoreAction) {
        this.$refs.refMoreAction.isReport = false
      }
    },
    async hUnlike () {
      try {
        // 1. 调用接口articleId
        await unLike(this.articleId)
        this.$toast.success('删除成功')
        // 2. 删除文章
        this.delArticle(this.articleId)
      } catch (err) {
        this.$toast.fail('删除失败')
      }
      this.isShowMoreAction = false
    },
    delArticle (articleId) {
      // 1. 找到文章
      const idx = this.list.findIndex(item => {
        if (item.art_id === articleId) {
          return true
        }
      })
      // 2. 删除
      if (idx !== -1) {
        this.list.splice(idx, 1)
      }
    },

    async hReport (typeId) {
      console.log('收到的举报类型是', typeId)
      try {
        // 1.发请求,举报，调用接口articleId，
        await report(this.articleId, typeId)
        // 2. 删除文章
        this.delArticle(this.articleId)
        this.$toast.success('举报成功')
      } catch (err) {
        this.$toast.fail('举报失败')
      }
      this.isShowMoreAction = false
    }
  }
}

</script>
<style scoped lang='less'>
.meta {
  span {
    margin-right: 10px;
  }
  display: flex;
  // 让它在最右边
  .close {
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left: auto;
  }
}
</style>

